<template>
  <div>
    <!--标题栏组件-->
    <nav-bar>
      <template v-slot:title>商品详情</template>
    </nav-bar>
    <div class="header">
      <!-- 商品图片 -->
      <van-image
        style="margin-top: 45px"
        width="100%"
        height="auto"
        lazy-load
        :src="goods.cover_url"
      />
      <!-- 商品卡片 -->
      <van-card
        style="text-align: left"
        :num="goods.stock"
        :price="goods.price + '.00'"
        :desc="goods.description"
        :title="goods.title"
      >
        <template #tags>
          <van-tag plain v-if="goods.sales > 1" type="danger">热销</van-tag>
          <van-tag plain type="danger">包邮</van-tag>
        </template>
        <template #footer>
          <van-button type="success" @click="handleAddCart"
            >加入购物车</van-button
          >
          <van-button type="danger" @click="goToCart">立即购买</van-button>
        </template>
      </van-card>
    </div>
    <!-- 详情信息 -->
    <div class="info">
      <van-tabs v-model="active">
        <van-tab title="概述">
          <div v-html="goods.details"></div>
        </van-tab>
        <van-tab title="热评">
          <div v-for="item in goods.comments" :key="item">
            <van-card
              :desc="'评论时间：' + item.updated_at"
              :title="'用户名：' + item.user.name"
              :thumb="item.user.avatar_url"
            >
              <template #tags>
                <p>{{ item.content }}</p>
              </template>
            </van-card>
          </div>
        </van-tab>
        <van-tab title="相关图书">
          <good-list :goods="like_goods"></good-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import GoodList from "components/content/Goods/GoodList.vue";
import NavBar from "components/common/NavBar.vue";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getDetail } from "network/detail.js";
import { addCart } from "network/cart.js";
import { Toast } from "vant";
import { useStore } from "vuex";
export default {
  name: "DetailView",
  components: { NavBar, GoodList },
  setup() {
    const store = useStore();
    let active = ref(0);
    //接受路由传过来的值
    let id = ref(0);
    const route = useRoute();
    const router = useRouter();
    //数据模型
    const dataModel = reactive({
      goods: {},
      like_goods: [],
    });
    onMounted(() => {
      //传过来的id
      id.value = route.query.id;
      //获取商品详情的数据
      getDetail(id.value).then((res) => {
        dataModel.goods = res.goods;
        dataModel.like_goods = res.like_goods;
      });
    });
    //添加购物车
    const handleAddCart = () => {
      addCart({ goods_id: dataModel.goods.id, num: 1 }).then((res) => {
        if (res.status == "201" || res.status == "204") {
          Toast.success("添加成功");
          store.dispatch("updateCart");
        }
      });
    };
    //立即购买
    const goToCart = () => {
      addCart({ goods_id: dataModel.goods.id, num: 1 }).then((res) => {
        if (res.status == "201" || res.status == "204") {
          Toast.success("添加成功,显示购物车");
          store.dispatch("updateCart");
          router.push({ path: "/shopcart" });
        }
      });
    };
    return {
      id,
      ...toRefs(dataModel),
      active,
      handleAddCart,
      goToCart,
    };
  },
};
</script>

<style>
.info {
  text-align: left;
  margin-bottom: 50px;
}
.van-card__content {
  margin-top: 10px !important;
}
</style>